<div class="row">
    <div class="col-xs-12">
        <div class="panel hide">
            <a href="###" ng-click="newFolder()" role="button" class="btn btn-primary btn-sm"><span class="fa fa-plus-square" aria-hidden="true">&nbsp;</span>新建文件夹</a>
        </div>
        <div class="box">
            <div class="box-header">
                <div class="col-xs-3 pull-left">
                    <ul class="list-inline">
                        <li><a href="###" id="getPrePtah" ng-click="getPrePath()" ><i class="fa fa-fw fa-mail-reply"></i> 返回上一级</a></li>&nbsp;|&nbsp;
                        <li><a href="###" ng-click="getAllFiles()"><i class="fa fa-fw fa-file-o"></i> 全部文件</a></li>
                    </ul>
                </div>
                <div class="col-xs-7 pull-left">当前目录：{{currentPath}}</div>
                <div class="col-xs-2 pull-right" id="fileViewStyle">
                    <div class="btn-group pull-right">
                        <button class="btn" ng-class="{true: 'btn-primary', false: 'btn-default'}[listView]" type="button"  ng-click="listViewShow()" title="列表"><i class="fa fa-fw fa-list"></i></button>
                        <button class="btn" ng-class="{true: 'btn-default', false: 'btn-primary'}[listView]" type="button" ng-click="thumbnailViewShow()" title="缩略图预览"><i class="fa fa-fw fa-th-large"></i> </button>
                    </div>
                </div>
            </div><!-- /.box-header -->

            <div class="box-body table-responsive no-padding">
                <div class="listView" ng-class="{true: 'show', false: 'hide'}[listView]">
                    <table class="table table-hover">
                        <tr>
                            <th>文件名</th>
                            <th>文件大小</th>
                            <th>修改时间</th>
                            <th>操作</th>
                        </tr>
                        <tr ng-repeat="file in fileData">
                            <td class="text-primary"><i ng-class="{'fa fa-fw fa-folder': (file.type == 'folder'),
                            'fa fa-fw fa-file-code-o' : (file.type == 'js'),
                            'fa fa-fw fa-file-o' : (file.type == 'html'),
                            'fa fa-fw fa-file-image-o' : (file.type == 'image'),
                            'fa fa-fw fa-file-movie-o' : (file.type == 'video'),
                            'fa fa-fw fa-file-text' : (file.type == 'css'),
                            'fa fa-fw fa-file-text-o' : (file.type == 'others')
                            }"></i>&nbsp;
                                <a href="###" ng-click="getFiles(file.type,file.name,file.path)">{{file.name}}</a>
                            </td>
                            <td>{{file.size}}</td>
                            <td>{{file.date | date : "M/d/yy h:mm a"}}</td>
                            <td>
                                <a href="#" data-whatever="{{file.name}},{{file.path}}"data-toggle="modal" data-target="#modifyFile" title="修改"  class="text-info" ng-show="file.type == 'html' || file.type == 'js' || file.type == 'css'" class="text-info">修改</a>&nbsp;&nbsp;
                                <a href="#" data-whatever="{{file.name}},{{file.path}}"data-toggle="modal" data-target="#reNameFile" title="重命名" class="text-warning">重命名</a>&nbsp;&nbsp;
                                <a href="#" data-whatever="{{file.path}}" data-toggle="modal" data-target="#checkIfDel" title="删除" class="text-danger">删除</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="thumbnailView" ng-class="{true: 'hide', false: 'show'}[listView]">
                    <ul class="list-group">
                        <li class="list-group-item" ng-repeat="file in fileData">
                            <div class="fileImg" ng-click="getFiles(file.type,file.name,file.path)">
                                <a href="/upload{{currentPath}}/{{file.name}}" class="fancybox" data-fancybox-group="gallery" ng-show="file.type == 'image'"><img src="/upload{{currentPath}}/{{file.name}}" alt="{{file.name}}" title="{{file.name}}" /></a>
                                <i ng-show="file.type != 'image'" ng-class="{'fa fa-fw fa-folder': (file.type == 'folder'),
                            'fa fa-fw fa-file-code-o' : (file.type == 'js'),
                            'fa fa-fw fa-fw fa-file-text' : (file.type == 'css'),
                            'fa fa-fw fa-file-movie-o' :(file.type == 'video'),
                            'fa fa-fw fa-file-o' : (file.type == 'html'),
                            'fa fa-fw fa-file-text-o' : (file.type == 'others')
                            }"></i></div>
                            <p class="fileName">{{file.name}}</p>
                        </li>
                    </ul>
                </div>
            </div><!-- /.box-body -->
            <div class="overlay hide" id="dataLoading">
                <i class="fa fa-refresh fa-spin"></i>
            </div>
        </div><!-- /.box -->
    </div>

    <!--文件重命名模态窗口-->
    <div class="modal fade" id="reNameFile">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">文件或文件夹重命名</h4>
                </div>
                <div class="modal-body">
                    <form role="form" class="form-horizontal" name="myForm" ng-submit="processForm(myForm.$valid)" novalidate>
                        <div class="alert alert-warning">重命名会影响到前台所引用的相关文件，请谨慎操作</div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">原名称</label>
                            <div class="col-sm-6">
                                <p class="form-control-static text-primary">{{formData.oldName}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">重命名</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" name="newName" ng-model="formData.newName" required/>
                                <label for="inputError" class="control-label text-danger" ng-show="myForm.newName.$invalid && !myForm.newName.$pristine"><i class="fa fa-times-circle-o"></i>请填写新的文件名称</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid">提交</button>
                        </div>
                    </form>

                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

    </div><!-- /.row -->

    <!--文件修改模态窗口-->
    <div class="modal fade " id="modifyFile">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">文件修改</h4>
                </div>
                <div class="modal-body">
                    <form role="form" class="form-horizontal" name="mdForm" ng-submit="processMdForm(mdForm.$valid)" novalidate>
                        <div class="alert alert-danger">修改会影响到前台所引用的相关文件，请谨慎操作</div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">文件名称</label>
                            <div class="col-sm-8">
                                <p class="form-control-static text-primary">{{mdFormData.name}}</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">内容</label>
                            <div class="col-sm-9">
                                <textarea name="code"  class="form-control" id="" cols="100" rows="20" ng-model="mdFormData.code" required></textarea>
                                <label for="inputError" class="control-label text-danger" ng-show="mdForm.code.$invalid && !mdForm.code.$pristine"><i class="fa fa-times-circle-o"></i>请正确加入代码，注意格式</label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" ng-disabled="mdForm.$invalid">提交</button>
                        </div>
                    </form>

                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div><!-- /.row -->


    <!--信息提示模态窗口-->
    <div class="modal fade" id="checkIfDel">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">系统提示</h4>
                </div>
                <div class="modal-body">
                    <h4 class="text-danger"><i class="icon fa fa-warning"></i> 该操作无法撤销，确认删除？</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" ng-click="delFile()">删除</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>
<script>
    $(function(){
        $('.fancybox').fancybox();
    })
</script>
<script>
    angular.module("adminApp",[])
            .controller("adminCtrl",function($scope,$http){
                $scope.formData = {};
//                $scope.formData.oldName = "";
                $scope.mdFormData = {};
                $scope.fileData = {};

//                初始化显示方式
                $scope.listView = true;


                getFolderList($scope,$http,"");

//                监听确认删除弹窗，传递参数
                $('#checkIfDel').on('show.bs.modal', function (event) {
                    var obj = $(event.relatedTarget);
                    $scope.targetPath = obj.data('whatever');
                }).on('hide.bs.modal', function (event) {
                    $scope.targetPath ="";
                });

//                重命名弹窗参数传递
                $('#reNameFile').on('show.bs.modal', function (event) {
                    var obj = $(event.relatedTarget);
                    var editPath = obj.data('whatever');
//                    如果不为空则为编辑状态
                    if(editPath){
                        $scope.formData.oldName = (editPath.split(","))[0];
                        $scope.formData.path = (editPath.split(","))[1];
                        $scope.targetPath = (editPath.split(","))[1];
                    }else{

                    }
                }).on('hidden.bs.modal', function (e) {
                    // 清空数据
                    $scope.formData = {};
                    $scope.targetPath ="";

                });


//                修改html代码参数传递
                $('#modifyFile').on('show.bs.modal', function (event) {
                    var obj = $(event.relatedTarget);
                    var editPath = obj.data('whatever');
//                    如果不为空则为编辑状态
                    if(editPath){
                        $scope.mdFormData.name = (editPath.split(","))[0];
                        $scope.mdFormData.path = (editPath.split(","))[1];
                        $scope.targetPath = (editPath.split(","))[1];
                        $http.get("/admin/manage/filesList/getFileInfo?filePath="+$scope.mdFormData.path).success(function(result){
                            $scope.mdFormData.code = result.fileData;
                        })

                    }else{

                    }
                }).on('hidden.bs.modal', function (e) {
                    // 清空数据
                    $scope.mdFormData = {};
                    $scope.targetPath ="";

                });

                $scope.processForm = function(isValid){
                    var curentUrl = "/admin/manage/filesList/addFolder";
                    if($scope.targetPath)
                    {
                        $scope.formData.newPath = $scope.rootPath +$scope.currentPath +"/"+ $scope.formData.newName;
                        curentUrl = "/admin/manage/filesList/fileReName";
                    }
                    if(isValid){
                        $http({
                            method  : 'POST',
                            url     : curentUrl,
                            data    : $.param($scope.formData),  // pass in data as strings
                            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
                        })
                        .success(function(data) {
                            if(data === "success"){
                                $("#reNameFile").modal("hide");
                                getFolderList($scope,$http,$scope.rootPath +$scope.currentPath);

                            }else{
                                alert("未知异常，请稍后重试");
                            }
                        });
                    }else{
                        alert("校验失败")
                    }
                };

//                提交更新后的文件
                $scope.processMdForm = function(isValid){
                    if(isValid){
                        $http({
                            method  : 'POST',
                            url     : "/admin/manage/filesList/updateFileInfo",
                            data    : $.param($scope.mdFormData),  // pass in data as strings
                            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
                        })
                        .success(function(data) {
                            if(data === "success"){
                                $("#modifyFile").modal("hide");
                                getFolderList($scope,$http,$scope.rootPath +$scope.currentPath);

                            }else{
                                alert("未知异常，请稍后重试");
                            }
                        });
                    }else{
                        alert("校验失败")
                    }
                }

                $scope.newFolder  = function(){
                    alert("开发中...")
                }

//                列表或缩略图切换
                $scope.listViewShow = function(){
                    $scope.listView = true;
                }

                $scope.thumbnailViewShow = function(){
                    $scope.listView = false;
                }

//                删除文件或文件夹
                $scope.delFile = function(){
                    $http.get("/admin/manage/filesList/fileDel?filePath="+$scope.targetPath).success(function(result){
                        $('#checkIfDel').modal("hide");
                        console.log("del success!");
//                        重载数据
                        getFolderList($scope,$http,$scope.rootPath +$scope.currentPath);
                    })
                };

//                进入点击的目录
                $scope.getFiles = function(type,name,path){
                    if(type === "folder"){
                        //                    记录前一路径

                        getFolderList($scope,$http,path);

                    }else if(type === "image" && $scope.listView){
//                        var obj = this;
//                        console.log(this)
                    }
                };

                $scope.getAllFiles = function(){
                    getFolderList($scope,$http,"")
                };

//                进入上级目录
                $scope.getPrePath = function(){

//                    找到上级目录
                    var currentPathArr = ($scope.currentPath).split("/");
                    if(currentPathArr.length > 0){
                        var currentFolderLength = (currentPathArr[currentPathArr.length-1]).length + 1;
                        var prePath = ($scope.currentPath).substring(0,($scope.currentPath).length - currentFolderLength);
                        $scope.prePath = $scope.rootPath + prePath;
                    }

                    getFolderList($scope,$http,$scope.prePath);

                }

            })


            function getFolderList($scope,$http,path){
                $("#dataLoading").removeClass("hide");
                $http.get("/admin/manage/filesList/list?filePath="+path).success(function(result){

                    $scope.fileData = result.pathsInfo;
                    $scope.rootPath = result.rootPath;
                    $scope.currentPath =  getCurrentPath($scope,$http,path);

                    $("#dataLoading").addClass("hide");

                })
            }

//            获取当前文件目录
            function getCurrentPath($scope,$http,path){
                if(path){
                    var cutLength = ($scope.rootPath).length;
                    var currentPath  = path.substring(cutLength,path.length);
                    return currentPath;
                }else{
                    return "";
                }
            }


</script>